<!--学员处分信息列表-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right40">
        <div class="item-name">处分类别：</div>
        <el-select v-model="dataForm.putype1" placeholder="请选择" class="inputWidth right10" size="mini" @change="choseNext">
          <el-option v-for="item in type1" :key="item.typeName" :label="item.typeName" :value="item.typeName"></el-option>
        </el-select>
        <el-select v-model="dataForm.putype2" placeholder="请选择" class="inputWidth" size="mini">
          <el-option v-for="item in type2" :key="item.typeName" :label="item.typeName" :value="item.typeName"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right40">
        <div class="item-name">学员队：</div>
        <el-select v-model="dataForm.studentdui" placeholder="请选择" class="inputWidth" size="mini">
          <el-option v-for="item in studentList" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right40">
        <div class="item-name">学号：</div>
        <el-input v-model="dataForm.studentCode" class="inputWidth" size="mini"></el-input>
      </div>
      <div class="search-container-item right40">
        <div class="item-name">姓名：</div>
        <el-input v-model="dataForm.studentName" class="inputWidth" size="mini"></el-input>
      </div>
       <div class="search-button color-primary width70" @click="initList">
        <img src="../../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div class="search-button color-primary width70 addBtn" @click="addInfo">
        <img src="../../../../assets/classHours/icon-addBig.png" alt="" />
        <span>新增</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" >
        <el-table-column prop="courseName" label="操作" align="center" width="340">
          <div class="flex" slot-scope="scope">
            <span class="small-btn color-primary right22" @click="editInfo(scope.row.punishmentInfoVO.puid,2)">
              <img src="../../../../assets/assessment/icon-search.png" alt="" /> 查看
            </span>
            <span class="small-btn edit-green right22" @click="editInfo(scope.row.punishmentInfoVO.puid,1)">
              <img src="../../../../assets/assessment/icon-plan-record-detail.png"> 修改
            </span>
            <span class="small-btn delete-red" @click="deleteInfo(scope.row.punishmentInfoVO.puid)">
              <img src="../../../../assets/assessment/icon-delete.png"> 删除
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="studentCode" label="学号" align="center">
          <template slot-scope="scope">{{scope.row.studentInfoVO.studentCode}}</template>
        </el-table-column>
        <el-table-column prop="studentName" label="姓名" align="center" width="100">
            <template slot-scope="scope">
                <span class="editName">
                    {{scope.row.studentInfoVO.studentName}}<img src="../../../../assets/assessment/icon-plan-record-detail.png" @click="editName(scope.row.studentInfoVO.studentCode)">
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="studentdui" label="学员队" align="center">
          <template slot-scope="scope">{{scope.row.studentInfoVO.studentdui}}</template>
        </el-table-column>
        <el-table-column prop="putypeName" label="处分类别" align="center">
          <template slot-scope="scope">{{scope.row.punishmentInfoVO.putype1}}&nbsp;&nbsp;&nbsp;{{scope.row.punishmentInfoVO.putype2}}</template>
        </el-table-column>
        <el-table-column prop="effdate" label="生效日期" align="center">
          <template slot-scope="scope">{{scope.row.punishmentInfoVO.effdate}}</template>
        </el-table-column>
        <el-table-column prop="cencelDate" label="撤销日期" align="center">
          <template slot-scope="scope">{{scope.row.punishmentInfoVO.cencelDate}}</template>
        </el-table-column>
        <el-table-column prop="reason" label="处分原因" align="center">
          <template slot-scope="scope">{{scope.row.punishmentInfoVO.reason}}</template>
        </el-table-column>
        
      </el-table>
    </div>
    <div class="pagination-block">
      <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>

import {getPunishList,deletePunish} from "@/api/student";
export default {
  data() {
    return {
      type1:[],
      type2:[],
      total:1,
      studentList:[],//学员队
      dataForm:{
        current:1,
        size:50,
        putype1:'',//处分类型1
        putype2:'',//处分类型2
        studentCode:'',//学号
        studentdui:'',//学员队
        studentName:'',//学生姓名
      },
      tableData: [],
    };
  },
  mounted(){
    this.commonApi.getPunishList({typeParent:0}).then(res=>{
      this.type1 = res.data
    })
    //学员队列表
    this.commonApi.getStudentDuiData().then(res=>{
      this.studentList = res.data
    })
    this.initList()
  },
  methods: {
    //获取下级处罚列表
    choseNext(e){
      this.commonApi.getPunishList({typeParent:e.value}).then(res=>{
        this.type2 = res.data
      })
    },
    //当前页
    currentPage(e){
      this.dataForm.current = e;
      this.initList()
    },
    //初始化列表
    async initList(){
      let res = await getPunishList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }
    },
    //删除
    deleteInfo(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let res = await deletePunish({puid:id})
        debugger
        if(res.code == 200){
          this.$message.success('删除成功！');
          this.initList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        }); 
      });
    },

    //新增
    addInfo(){
      this.$router.push({
        path:'/student/disciplinaryInfo/punishment/add'
      })
    },
    //编辑名字
    editName(code){
      this.$router.push({
        path:'/student/studentStatus/infoSearch',
        query:{
          studentCode:code
        }
      })
    },
    //编辑
    editInfo(puid,type){
      this.$router.push({
        path:'/student/disciplinaryInfo/punishment/editInfo',
        query:{
            puid:puid,
            type:type
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.search-container {
  justify-content: flex-start !important;
  position: relative;
}
.table-css {
  margin-top: 30px;

  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.right40{margin-right: 30px;}
.right10{margin-right: 10px;}
.flex{
    display: flex;
    justify-content: center;
}
.width70{width: 70px;}
.addBtn{
  position: absolute;
  right: 0;
}
.inputWidth{
  width: 110px;
}
.right22{margin-right: 22px;}
.color-warning{
    background: #FEF1E8;
    border: 1px solid #F86900;
    >span{color:#F86900;}
    >img{width: 17px!important;height:17px!important}
}
.color-green{
    background:#F9F9F9;
    border: 1px solid #02C86C;
    >span{color: #02C86C;}
    >img{width: 17px!important;height:17px!important}
}
.delete-red{
  color: #FA5339;
  background: #FFEFEF;
  border: 1px solid #FA5339;
}
.edit-green{
    background: #F1FFF8;
    border: 1px solid #02C86C;
    color: #02C86C;
}
</style>
